{include file="public/header"/}
<script src="{__PUBLIC_PATH}/common/js/jquery.js?v={$version}"></script>
<script src="{__PUBLIC_PATH}/admin/pcf/global.js?v={$version}"></script>
</head>
<body>
<style>
.layui-table-cell {height:30px!important;}
</style>
<div class="layui-fluid" id="LAY-component-layer-list">
    <div class="layui-card">
        <div class="layui-card-body table-tool-mini">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <button type="button" class="layui-btn icon-btn multi-upload-demoMore" lay-data="{number:5,ey_savepath:'allimg',ey_callback:'imgupload_call_back'}"><i class="layui-icon">&#xe608;</i> 添加图片</button>                    
                        <button data-type="batch_del" data-url="{:url('/res/batch_del')}" class="layui-btn layui-btn-danger icon-btn">
                        <i class="layui-icon"></i>批量删除</button>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">图片ID：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="id" placeholder="请输入图片ID" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">图片名称：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="name" placeholder="请输入图片名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn" lay-filter="image-search" lay-submit>
                        <i class="layui-icon">&#xe615;</i>搜索</button>
                    </div>
                </div>
            </div>
            <table id="imagesTable" lay-filter="imagesTable"></table>
        </div>
    </div>
</div>
<script type="text/html" id="imageBar">
    <a class="layui-btn layui-btn-danger layui-btn-sm" data-id="{{d.id}}" data-pid="{{d.pid}}" data-type="del">删除</a>
</script>
{include file="public/footer"/}
<script>
    layui.use(['layer', 'form', 'table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        // 渲染表格
        var insTb = table.render({
            elem: '#imagesTable',
            url: "{:url('/res/index')}",
            page: true,
            limit: 20,
            cellMinWidth: 100,
            height: 'full-99',
            id:'imagesTable',
            cols: [[
                {type:'checkbox'},
                {field: 'pid', title: 'PID',width:350,align:'center'},
                {field: 'url', title: '缩略图',width:100,align:'center',templet: function(data){
                    return '<a href="javascript:void(0);" onclick=BigImages("'+data.url+'")><image style="max-width:30px;max-height:30px;" src="'+data.url+'"/></a>';
                }},
                {field: 'name', title: '图片名称',align:'center'},
                {field: 'url', title: '图片地址',align:'center'},
                {field: 'ctime',sort: true, width:200, title: '创建时间' ,align:'center'},
                {title:'操作',align:'center',toolbar:'#imageBar',width: 190}
            ]]
        });

        form.on('submit(image-search)', function (data) {
            insTb.reload({where: data.field}, 'data');
        });

        $(document).on("click","#LAY-component-layer-list .layui-btn",function(){
          var type = $(this).data('type');
          active[type] && active[type].call(this);
        });

        //触发事件
        var active = {
            del: function(){
                var obj = this;
                var id = $(obj).attr('data-id');
                var pid = $(obj).attr('data-pid');
                layer.confirm('真的删除么',{icon:3}, function(index){
                    $.post("{:url('/res/del')}", {id:id,pid:pid}, function (res) {
                        if(res.code == 1){
                            layer.close(index);
                            layer.msg(res.msg,{time:1000},function(){
                                insTb.reload();
                            });
                        }else{
                            layer.msg(res.msg, {icon: 2, time: 1000});
                        }
                    });
                });
            },
            batch_del: function(){
                var checkRows = table.checkStatus('imagesTable');
                if (checkRows.data.length === 0) {
                    layer.msg('请选择要删除的数据', {icon: 2,time:1000});
                    return;
                }
                var ids = checkRows.data.map(function (d) {
                    return d.id;
                });
                batch_del(this, ids);
            }
        };
    });
    // 上传图集相册回调函数
    function imgupload_call_back(pathObj){
        if (pathObj.state == "SUCCESS"){
            layer.msg("上传成功",{icon: 1,time:1000},function(){
                window.location.reload();
            });
        }else{
            layer.msg("上传失败", {icon: 2,time:1000});
        }
    }
</script>
</body>
</html>